﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" src="../jquery/jquery-1.4.1-vsdoc.js"></script>
    <style>
        .outer{
            width:200px;
            height:200px;
            background-color:Red;
        }
        
        .inner{
            width:50px;
            height:50px;
            background-color:Yellow;
            float:left;
        }
    </style>
</head>
<body>

<p>ffffff</p>
<p>aef</p>
<p id="foo">foo</p>

<div class="outer" id="outer1">  
  Outer 1  
  <div class="inner" id="inner1">Inner 1</div>  
</div>  
<div class="outer" id="outer2">  
  Outer 2  
  <div class="inner" id="inner2">Inner 2</div>  
</div>  
<div id="console"></div>   

<script type="text/javascript">
    //jQuery('p').one('click', function() { alert(this.innerHTML); });
//    $('#foo').bind('click', function() { alert($(this).text() + arguments[1]); });
//    $('#foo').trigger('click', 'abc');
    function report(event) {
        $('#console').append('<div>' + event.type + '</div>');
    }

    $(function() {
        $('#outer1')
       .bind('mouseover', report)
       .bind('mouseout', report);
        $('#outer2').hover(report, report);
    });  

    
</script>
    <div style="height: 114px; width: 216px">
    </div>
</body>
</html>
